<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('主页')"/>
    <!--  首页自定义样式  -->
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<body>
<div id="app" style="width:100%;">
<el-container id="index-container">
    <!--   侧边栏     -->
    <el-aside width="200px">
        <div class="aside-logo">
            logo
        </div>
        <el-menu unique-opened default-active="2" @open="handleOpen" @close="handleClose" background-color="#545c64"
                 text-color="#fff" active-text-color="#ffd04b">
            <!--       目前就三重菜单，以后再做         -->
            <template v-for="(item, index) in menuTree" :key="index">
                <!--         第一级菜单               -->
                <el-submenu :index="index" v-if="item.children &amp;&amp; item.children.length > 0">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.menuName}}</span>
                    </template>
                    <!--              第二级菜单 bug log: v-if 和 v-for要分开写，不然重复渲染菜单             -->
                    <template v-if="item.children.children &amp;&amp; item.children.children.length > 0">
                        <el-submenu :index="index + '-' + index2" v-for="(childrenMenu2, index2) in item.children"
                                    :key="'menu2Has' + index2">
                            <template slot="title">{{childrenMenu2.menuName + '-' +
                                childrenMenu2.children.length}}
                            </template>
                            <!--          第三级菜单              -->
                            <el-menu-item :index="index + '-' + index2 + '-' + index3"
                                          v-for="(childrenMenu3, index3) in childrenMenu2.children"
                                          :key="'menu3No' + index3"
                                          @click="addTab(childrenMenu3.menuName, childrenMenu3.menuUrl)">
                                {{childrenMenu3.menuName}}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="index + '-' + index2" v-for="(childrenMenu2, index2) in item.children"
                                      :key="'menu2No' + index2"
                                      @click="addTab(childrenMenu2.menuName, childrenMenu2.menuUrl)">
                            {{childrenMenu2.menuName}}
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item :index="index" v-else @click="addTab(item.menuName, item.menuUrl)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.menuName}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-aside>
    <el-container>
        <!--     头部       -->
        <el-header>Header</el-header>
        <!--     主体       -->
        <el-main>
            <el-tabs v-model="editableTabsValue" type="card" :closable="editableTabsValue != homeUrl"
                     @tab-remove="removeTab">
                <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name">
                    <iframe :src="item.content" style="height: 570px;width: 100%;border: none"></iframe>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <!--     底部       -->
        <el-footer>Footer</el-footer>
    </el-container>
</el-container>
</div>
<th:block th:include="include :: footer" />
<script th:src="@{/api/system/menu.js}"></script>
<script th:src="@{/pageVue/index.js}"></script>
</body>
</html>

